<template>
  <div class="playback-page">
    <h1>电影播放页</h1>
    <div class="video-container">
      <video controls width="100%" :src="videoUrl"></video>
    </div>

    <!-- 新增：导演信息展示 -->
    <div class="director-info">
      <div class="director-avatar">
        <img :src="director.avatar" :alt="director.name">
      </div>
      <div class="director-details">
        <h3>{{ director.name }}</h3>
        <p>{{ director.introduction }}</p>
      </div>
    </div>

    <div class="related-images">
      <h2>电影推荐</h2> <!-- 修改文字 -->
      <div class="image-list">
        <img 
          v-for="(image, index) in relatedImages" 
          :key="index" 
          :src="image" 
          alt="相关图片"
          class="related-image-item"
        >
      </div>
    </div>

    <!-- 删除了返回发现页的 router-link -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'; // 导入 ref 和 onMounted
import { useRoute } from 'vue-router'; // 导入 useRoute

const route = useRoute(); // 获取 route 实例

// 使用 ref 定义响应式数据
const videoUrl = ref('http://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4');
const relatedImages = ref([
  'https://codelover.club/coursefiles/images/film/生活.jpeg',
  'https://codelover.club/coursefiles/images/film/科幻.jpeg',
  'https://codelover.club/coursefiles/images/film/纪录.jpeg',
  'https://codelover.club/coursefiles/images/film/音乐.jpeg',
  'https://codelover.club/coursefiles/images/film/剧情.jpeg',
  'https://codelover.club/coursefiles/images/film/混剪.jpeg',
  'https://codelover.club/coursefiles/images/film/预告.jpeg',
  'https://codelover.club/coursefiles/images/film/广告.jpeg',
  'https://codelover.club/coursefiles/images/film/搞笑.jpeg',
]);

// 新增：导演信息数据
const director = ref({
  name: '导演姓名',
  introduction: '这里是导演的简介...',
  avatar: 'https://codelover.club/coursefiles/images/film/爱情.jpeg' // 替换为实际导演头像链接
});

onMounted(() => {
  // 可以在这里根据 route.params.id 加载电影详情和相关数据
  console.log('当前电影ID:', route.params.id);
});

</script>

<style src="../styles/PlaybackPage.css" scoped></style>